<template>
  <div class="wrapper">
    <vue-particles class="back" color="#B5838D" :particleOpacity="0.7" :particlesNumber="150"
                   shapeType="circle" :particleSize="4" linesColor="#555" :linesWidth="1"
                   :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="2"
                   :hoverEffect="true" hoverMode="grab" :clickEffect="false" clickMode="push"/>
    <div class="login-box">
      <div style="margin: 20px 0; text-align: center; font-size: 25px"><b>注册</b></div>
      <el-form :model="user" :rules="rules" ref="userForm">
        <el-form-item prop="username">
          <el-input placeholder="账号" size="medium" style="margin: 5px 0" prefix-icon="el-icon-user"
                    v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="密码" size="medium" style="margin: 5px 0" prefix-icon="el-icon-lock" show-password
                    v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input placeholder="确认密码" size="medium" style="margin: 5px 0" prefix-icon="el-icon-lock" show-password
                    v-model="user.confirmPassword"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input placeholder="邮箱" size="medium" style="margin: 5px 0" prefix-icon="el-icon-message"
                    v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item style="margin: 10px 0; text-align: right">
          <el-button type="primary" size="medium" autocomplete="off" @click="register">注册</el-button>
          <el-button type="warning" size="medium" autocomplete="off" @click="$router.push('/login')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      user: {},
      rules: {
        username: [
          {required: true, message: "用户名不能为空", trigger: 'blur'},
          {min: 3, max: 10, message: "长度 3 到 10 个字符", trigger: 'blur'}
        ],
        password: [
          {required: true, message: "密码不能为空", trigger: 'blur'},
          {min: 5, max: 20, message: "长度 5 到 20 个字符", trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: "请再次输入密码", trigger: 'blur'},
          {min: 5, max: 20, message: "长度 5 到 20 个字符", trigger: 'blur'}
        ],
        email: [
          {required: true, message: "邮箱不能为空", trigger: 'blur'},
          {type: 'email', message: "请输入正确的邮箱地址", trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    register() {
      this.$refs.userForm.validate((valid) => {
        if (this.user.password !== this.user.confirmPassword) {
          this.$message.error("两次密码输入不一致")
        }
        if (valid) {
          this.request.post("/user/register", this.user).then((res) => {
            if (res.code === '200') {
              this.$message.success("注册成功，赶快去登录吧！")
              this.$router.push("/login")
            } else {
              this.$message.error(res.msg)
              this.reset()
            }
          })
        }
      });
    },
    reset() {
      this.user.username = ""
      this.user.password = ""
      this.user.confirmPassword = ""
      this.user.email = ""
    }
  }
}
</script>
<style scoped>
.wrapper {
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #E8F5C6, #9FA5D5);
  overflow: hidden;
  /*background-color: #CFDEF3;*/
}

.login-box {
  margin: 200px auto;
  background: linear-gradient(200deg, #E0EAFC, #CFDEF3);
  width: 350px;
  height: 400px;
  padding: 20px;
  border-radius: 10px;
}

.back {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>